<template>
	<view class="page">
		<!-- 基本信息 -->
		<view class="info-section">
			<view class="section-title">基本信息</view>
			
			<view class="info-item">
				<text class="info-label">姓名</text>
				<text class="info-value">{{merchantData.name}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">手机号</text>
				<view class="phone-container">
					<text class="info-value">{{merchantData.phone}}</text>
					<view class="phone-icon" @click="callPhone">
						<image src="/static/img/phone-icon.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<view class="info-item">
				<text class="info-label">终端类型</text>
				<text class="info-value">{{merchantData.terminalType}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">登记时间</text>
				<text class="info-value">{{merchantData.createDate}}</text>
			</view>
		</view>
		
		<!-- 终端信息 -->
		<view class="info-section">
			<view class="section-title">终端信息</view>
			
			<view class="info-item">
				<text class="info-label">商户名称</text>
				<text class="info-value">{{merchantData.merchantName}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">终端编号</text>
				<text class="info-value">{{merchantData.snNo}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">商户编号</text>
				<text class="info-value">{{merchantData.merchantNo}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">开通时间</text>
				<text class="info-value">{{merchantData.accessTime==null?"":merchantData.accessTime}}</text>
			</view>
		</view>
		
		<!-- 达标状态 -->
		<view class="info-section">
			<view class="section-title">达标状态</view>
			
			<view class="info-item">
				<text class="info-label">激活达标</text>
				<text class="info-value">{{getStatusText(merchantData.activationStatus)}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">刷卡达标</text>
				<text class="info-value">{{getStatusText(merchantData.twoStatus)}}</text>
			</view>
			
			<view class="info-item">
				<text class="info-label">礼包达标</text>
				<text class="info-value">{{getStatusText(merchantData.threeStatus)}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require('../../config/api');
	
	export default {
		data() {
			return {
				id: '',
				merchantData: {
					name: '',
					phone: '',
					terminalType: '',
					createDate: '',
					merchantName: '',
					snNo: '',
					merchantNo: '',
					accessTime: '',
					activationStatus: '',
					twoStatus: '',
					threeStatus: ''
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id;
				this.loadMerchantDetail();
			}
		},
		methods: {
			// 获取商户详情
			loadMerchantDetail() {
				uni.showLoading({
					title: '加载中...'
				});
				
				// 添加token到请求头
				const headers = {
					'Content-Type': 'application/json',
					'token': uni.getStorageSync('token')
				};
				
				// 发送请求
				uni.request({
					url: api.merchantDjInfoUrl + this.id,
					method: 'POST',
					data: {},
					header: headers,
					success: (res) => {
						uni.hideLoading();
						
						if (res.data.code === 0) {
							// 成功获取数据
							this.merchantData = res.data.data;
						} else {
							// 失败
							uni.showToast({
								title: res.data.msg || '获取详情失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.hideLoading();
						console.error(err);
						uni.showToast({
							title: '网络异常，请稍后重试',
							icon: 'none'
						});
					}
				});
			},
			
			// 拨打电话
			callPhone() {
				if (this.merchantData.phone) {
					uni.makePhoneCall({
						phoneNumber: this.merchantData.phone
					});
				}
			},
			
			// 获取达标状态文本
			getStatusText(status) {
				if (status === '1') {
					return '已达标';
				} else if (status === '0') {
					return '未达标';
				} else {
					return '无';
				}
			}
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.info-section {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.info-item:last-child {
		border-bottom: none;
	}
	
	.info-label {
		color: #999;
		font-size: 28rpx;
	}
	
	.info-value {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}
	
	.phone-container {
		display: flex;
		align-items: center;
	}
	
	.phone-icon {
		width: 50rpx;
		height: 50rpx;
		background-color: #0091ff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
	
	.phone-icon image {
		width: 30rpx;
		height: 30rpx;
	}
</style> 